<template>
  <div
    class="navbar"
    :style="{
      backgroundColor: heads.headBgColor,
      height: heads.headHeight,
      boxShadow: heads.headBoxShadow,
      lineHeight: heads.headHeight,
    }"
  >
    <div
      class="title-menu"
      :style="{
        justifyContent: 'flex-start',
      }"
    >
      <!-- <el-image
        v-if="heads.headTitleImg"
        class="title-img"
        :style="{
          width: heads.headTitleImgWidth,
          height: heads.headTitleImgHeight,
          boxShadow: heads.headTitleImgBoxShadow,
          borderRadius: heads.headTitleImgBorderRadius,
        }"
        :src="heads.headTitleImgUrl"
        fit="cover"
      ></el-image> -->
      <div
        class="title-name"
        :style="{ color: heads.headFontColor, fontSize: heads.headFontSize }"
      >
        {{ this.$project.projectName }}
      </div>
      <!-- -------------------- -->
      <div class="main-menu">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#48a0f9"
          text-color="#fff"
          @select="handleSelect"
        >
          <el-menu-item index="1" @click="menuHandler('')">首页</el-menu-item>

          <el-submenu index="2">
            <template slot="title">个人中心</template>
            <el-menu-item index="2-1" @click="menuHandler('center')">修改信息</el-menu-item>
            <el-menu-item index="2-2" @click="menuHandler('updatePassword')">修改密码</el-menu-item>
            <el-menu-item index="2-3" @click="menuHandler('wodelingyang')">我的领养</el-menu-item>
            <!-- <el-menu-item index="2-4" @click="menuHandler('wodetiezi')">我的帖子</el-menu-item> -->
            <!-- <el-menu-item index="2-5" @click="menuHandler('wodedingdan')">我的订单</el-menu-item> -->
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">动物救助</template>
            <!-- <el-menu-item index="3-1" @click="menuHandler('xinxizixun')">信息咨询</el-menu-item> -->
            <el-menu-item index="3-3" @click="menuHandler('baoguangtai')">曝光台</el-menu-item>
            <el-menu-item index="3-2" @click="menuHandler('liulangdongwujubao')">流浪动物举报</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">动物领养</template>
            <el-menu-item index="4-1" @click="menuHandler('lingyangzhongxin')">领养中心</el-menu-item>
            <!-- <el-menu-item index="4-2" @click="menuHandler('lingyanghuifang')">领养回访</el-menu-item> -->
          </el-submenu>
          <!-- <el-menu-item index="5" @click="menuHandler('luntanzixun')">论坛资讯</el-menu-item> -->
          <!-- <el-submenu index="6">
            <template slot="title">爱心板块</template>
            <el-menu-item index="6-2" @click="menuHandler('pingtaishangcheng')">平台商城</el-menu-item>
            <el-menu-item index="6-1" @click="menuHandler('juanzhuwomen')">捐助我们</el-menu-item>
          </el-submenu> -->
          <!-- <el-menu-item index="6" @click="menuHandler('aixinbankuai')">爱心板块</el-menu-item> -->
        </el-menu>
      </div>

      <!-- ---------------------------- -->
    </div>

    <div class="right-menu">
      <div
        class="user-info"
        :style="{
          color: heads.headUserInfoFontColor,
          fontSize: heads.headUserInfoFontSize,
        }"
      >
        {{ this.$storage.get("role") }} {{ this.$storage.get("adminName") }}
      </div>
      <div
        v-if="role == '管理员'"
        class="logout"
        :style="{
          color: heads.headLogoutFontColor,
          fontSize: heads.headLogoutFontSize,
        }"
        @click="onIndexTap"
      >
        进入后台
      </div>
      <div
        class="logout"
        :style="{
          color: heads.headLogoutFontColor,
          fontSize: heads.headLogoutFontSize,
        }"
        @click="onLogout"
      >
        退出登录
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuList: [],
      dialogVisible: false,
      ruleForm: {},
      role: this.$storage.get("role"),
      user: {},
      heads: {
        headLogoutFontHoverColor: "#fff",
        headFontSize: "25px",
        headUserInfoFontColor: "#fff",
        headBoxShadow: "0 1px 6px #444",
        headTitleImgHeight: "44px",
        headLogoutFontHoverBgColor: "#55f",
        headFontColor: "#fff",
        headTitleImg: false,
        headHeight: "60px",
        headTitleImgBorderRadius: "22px",
        headTitleImgUrl:
          "http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg",
        headBgColor: "#48a0f9",
        headTitleImgBoxShadow: "0 1px 6px #444",
        headLogoutFontColor: "rgba(250, 250, 250, 1)",
        headUserInfoFontSize: "16px",
        headTitleImgWidth: "44px",
        headTitleStyle: "2",
        headLogoutFontSize: "16px",
      },
    };
  },
  created() {
    this.setHeaderStyle();
  },
  mounted() {
    let sessionTable = this.$storage.get("sessionTable");
    this.$http({
      url: sessionTable + "/session",
      method: "get",
    }).then(({ data }) => {
      if (data && data.code === 0) {
        this.user = data.data;
        console.log(this.user);
      } else {
        let message = this.$message;
        message.error(data.msg);
      }
    });
  },
  methods: {
    menuHandler(name) {
      let router = this.$router
      name = '/'+name
      router.push(name)
    },
    onLogout() {
      let storage = this.$storage;
      let router = this.$router;
      storage.remove("Token");
      router.replace({
        name: "login",
      });
    },
    onIndexTap() {
      window.location.href = `${this.$base.indexUrl}`;
    },
    setHeaderStyle() {
      this.$nextTick(() => {
        document
          .querySelectorAll(".navbar .right-menu .logout")
          .forEach((el) => {
            el.addEventListener("mouseenter", (e) => {
              e.stopPropagation();
              el.style.backgroundColor = this.heads.headLogoutFontHoverBgColor;
              el.style.color = this.heads.headLogoutFontHoverColor;
            });
            el.addEventListener("mouseleave", (e) => {
              e.stopPropagation();
              el.style.backgroundColor = "transparent";
              el.style.color = this.heads.headLogoutFontColor;
            });
          });
      });
    },
  },
};
</script>


<style lang="scss" scoped>
.navbar {
  height: 60px;
  line-height: 60px;
  width: 100%;
  padding: 0 34px;
  box-sizing: border-box;
  background-color: #48a0f9;
  position: relative;
  z-index: 111;

  .right-menu {
    position: absolute;
    right: 34px;
    top: 0;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 111;

    .user-info {
      font-size: 16px;
      color: red;
      padding: 0 12px;
    }

    .logout {
      font-size: 16px;
      color: red;
      padding: 0 12px;
      cursor: pointer;
    }
  }

  .title-menu {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;

    .title-img {
      width: 44px;
      height: 44px;
      border-radius: 22px;
      box-shadow: 0 1px 6px #444;
      margin-right: 16px;
    }

    .title-name {
      font-size: 24px;
      color: #fff;
      font-weight: 700;
    }
  }
  .main-menu {
    display: flex;
    margin-left: 100px;
    // justify-content: flex-end;
    // align-items: right;
    // width: 100%;
    // height: 100%;
  }
}
// .el-header .fr {
// 	float: right;
// }

// .el-header .fl {
// 	float: left;
// }

// .el-header {
// 	width: 100%;
// 	color: #333;
// 	text-align: center;
// 	line-height: 60px;
// 	padding: 0;
// 	z-index: 99;
// }

// .logo {
// 	width: 60px;
// 	height: 60px;
// 	margin-left: 70px;
// }

// .avator {
// 	width: 40px;
// 	height: 40px;
// 	background: #ffffff;
// 	border-radius: 50%;
// }

// .title {
// 	color: #ffffff;
// 	font-size: 20px;
// 	font-weight: bold;
// 	margin-left: 20px;
// }
</style>
